<template>
  <div class="user_list-page flexC">
    <div class="pageHead" style="display: flex;justify-content: space-between">
      <p style="font-size: 17px">Crontab日程列表</p>
      <Button type="primary" size="small" @click="crcrontab=true">添加</Button>
<!--      创建-->
      <Modal
              width="650"
              v-model="crcrontab"
              title="添加Crontab日程"
              :mask-closable="false"
      >
            <Form ref="crontabmodel" :model="crontabmodel" :rules="ruleValidate">
              <div style="margin-left: 78px;">
                <FormItem label="Minute(s)" prop="minute">
                  <Input
                      type="text"
                      v-model="crontabmodel.minute"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>
              <div style="margin-left: 90px;">
                <FormItem label="Hour(s)" prop="hour">
                  <Input
                      type="text"
                      v-model="crontabmodel.hour"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div style="margin-left: 10px;">
                <FormItem label="Day(s) Of The Week" prop="day_of_week">
                  <Input
                        type="text"
                        v-model="crontabmodel.day_of_week"
                        clearable
                        style="width: 457px"
                    />
                </FormItem>
              </div>

              <div  style="margin-left: 5px;">
                <FormItem label="Day(s) Of The Month" prop="day_of_month">
                  <Input
                      type="text"
                      v-model="crontabmodel.day_of_month"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div>
                <FormItem label="Month(s) Of The Year" prop="month_of_year">
                  <Input
                      type="text"
                      v-model="crontabmodel.month_of_year"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>
            </Form>
             <div slot="footer">
              <Button @click="crcrontab=false">取消</Button>
             <Button @click="createcrontab" type="primary">确定</Button>
            </div>
          </Modal>


<!--      修改-->
      <Modal
              width="650"
              v-model="upcrontab"
              title="编辑Crontab日程"
              :mask-closable="false"
      >
            <Form ref="upontabmodel" :model="upontabmodel" :rules="ruleValidate2">
              <div style="margin-left: 78px;">
                <FormItem label="Minute(s)" prop="minute">
                  <Input
                      type="text"
                      v-model="upontabmodel.minute"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>
              <div style="margin-left: 90px;">
                <FormItem label="Hour(s)" prop="hour">
                  <Input
                      type="text"
                      v-model="upontabmodel.hour"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div style="margin-left: 10px;">
                <FormItem label="Day(s) Of The Week" prop="day_of_week">
                  <Input
                        type="text"
                        v-model="upontabmodel.day_of_week"
                        clearable
                        style="width: 457px"
                    />
                </FormItem>
              </div>

              <div  style="margin-left: 5px;">
                <FormItem label="Day(s) Of The Month" prop="day_of_month">
                  <Input
                      type="text"
                      v-model="upontabmodel.day_of_month"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div>
                <FormItem label="Month(s) Of The Year" prop="month_of_year">
                  <Input
                      type="text"
                      v-model="upontabmodel.month_of_year"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>
            </Form>
             <div slot="footer">
              <Button @click="upcrontab=false">取消</Button>
             <Button @click="updatecrontab" type="primary">确定</Button>
            </div>
          </Modal>
    </div>

    <div class="pageHead1">
      <Table
          border
          :columns="columns1"
          :data="crontabdata"
          sortable="custom"
          ref="table"
          size="small"
      ></Table>
        <Page
          :total="page.total"
          :page-size= "page.size"
          :current="page.index"
          show-total
          show-elevator
          show-sizer
          @on-change="changeSize"
          @on-page-size-change="changePage"
          style="margin-top: 20px;"

          />
    </div>
  </div>
</template>

<script>
import {crontabList, CreateCrontab, deletecrontab, readcrontab, upcrontab, envlist} from '../../api/api'
export default {
  name: "Crontab",
  data() {
    return {
      page:{
        index:1,
        size:10,
        total:50
      },
      upcrontabid:'',
      crontabdata:[],
      crontabmodel:{
        'minute':'*',
        'hour':'*',
        'day_of_week':'*',
        'day_of_month':'*',
        'month_of_year':'*',
      },
      upontabmodel:{},
      crcrontab:false,
      upcrontab:false,
      columns1: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: 'Minute(s)',
          key: 'minute',
          align:'center'
        },
          {
          title: 'Hour(s)',
          key: 'hour',
          align:'center'
        },
          {
          title: 'Day(s) Of The Week',
          key: 'day_of_week',
          align:'center'
        },
          {
          title: 'Day(s) Of The Month',
          key: 'day_of_month',
          align:'center'
        },
          {
          title: 'Month(s) Of The Year',
          key: 'month_of_year',
          align:'center'
        },
          {
          title: "操作",
          key: "action",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.edit(params.row);
                      },
                    },
                  },
                  "编辑"
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h('Poptip', {
                style: {
                  color: '#ED4014'
                },
                props: {
                  confirm: true,
                  transfer: true,
                  placement: 'left-end',
                  title: '确定要删除吗！',
                  type: 'error',
                  size: 'small',
                },
                on: {
                  'on-ok': () => {
                    this.remove(params.row);
                  }
                }
              }, '删除'),
            ])
                ;

          },
        },
      ],
      ruleValidate: {
        minute: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'}
        ],
        hour: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'},
        ],
        day_of_week: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'},
        ],
        day_of_month: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'},
        ],
        month_of_year: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'},
        ],
      },
      ruleValidate2: {
        minute: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'}
        ],
        hour: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'},
        ],
        day_of_week: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'},
        ],
        day_of_month: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'},
        ],
        month_of_year: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'},
        ],
      },
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    getlist() {
      let data = {
        'size':this.page.size,
        'page':this.page.index
      }
      crontabList(data).then(res => {
        let data = res.data.results
        this.crontabdata = data
        this.page.total = data.count
      })
    },

    createcrontab() {
      CreateCrontab(this.crontabmodel).then(res => {
        this.crcrontab = false
        this.$Message.success('创建日程成功！')
        this.getlist()
      })
    },

    remove(row) {
      deletecrontab(row.id).then(res => {
        this.$Message.success('删除成功！')
        this.getlist()
      })
    },

    edit(row) {
      readcrontab(row.id).then(res =>{
        let data = res.data.data
        this.upcrontab = true
        this.upontabmodel = data
        this.upcrontabid = row.id
      })
    },

    updatecrontab() {
      upcrontab(this.upcrontabid,this.upontabmodel).then(res => {
        this.upcrontab = false
        this.$Message.success('修改成功！')
        this.getlist()
      })
    },

    changeSize(e) {
      let data = {
        'size':this.page.size,
        'page':e
      }
      crontabList(data).then(res =>{
        let data = res.data.data
        this.crontabdata = data
        this.page.total = res.count

      })
    },

    changePage(e){
      let data = {
        'size':e,
        'page':this.page.index
      }
      crontabList(data).then(res => {
        let data = res.data.data
        this.crontabdata = data
        this.page.total = res.count
      })
    }

  },
}

</script>

<style scoped>
.pageHead1 {
  padding: 16px 32px 30px 20px;
  background: #fff;
  border-bottom: 1px solid #e8eaec;
  /*p{*/
  /*  margin-bottom: 16px;*/
  /*}*/
  /*&>p:first-child{*/
  /*  color: #17233d;*/
  /*  font-weight: 500;*/
  /*  font-size: 20px;*/
  /*}*/
  /*&>p:last-child{*/
  /*  font-size: 14px;*/
  /*}*/
}
</style>
